<template>
	<view class="wrap">
		<view class="top">
			<u--form class="formClass" :rules="formRules" :model="recipientInfo" :errorType="errorType" ref="addAddressForm">
				<!-- <view class="item"> -->
				<u-form-item required="true" :label-width="labelWidth" label="联系人" prop="name">
					<u--input v-model="recipientInfo.name" :trim="true" type="text" placeholder="请填写姓名,最长8个字符" border="none" :customStyle="{padding: '6px 9px'}"/>
				</u-form-item>
				<u-form-item required="true" :label-width="labelWidth" label="联系方式" prop="phone">
					<u--input v-model="recipientInfo.phone" type="number" placeholder="请填写联系方式" border="none" :customStyle="{padding: '6px 9px'}"/>
				</u-form-item>
				<u-form-item required="true" :label-width="labelWidth" label="所在地区" prop="area">
					<view class="chooseArea">
						<uni-data-picker v-slot:default="{data, error, options}" :localdata="localData" popup-title="选择省-市-(区、县)" @change="onchange" @nodeclick="onnodeclick">
							<view>
								<!-- <view v-if="error" class="error">
									<text>{{ error }}</text>
								</view>
								<view v-if="data.length" class="input-selected">
									<view v-for="(item, index) in data" :key="index" class="selected-item">
										<text>{{ item.text }}</text>
									</view>
								</view>
								<view v-else class="input-selected"><text>{{recipientInfo.area}}</text></view> -->
								<view v-if="data.length">
									<u--input placeholder="选择省-市-(区、县)" readonly=true v-model="recipientInfo.area" border="none" :customStyle="{padding: '6px 9px', width:'220px'}"/>
								</view>
								<view v-else>
									<u--input placeholder="选择省-市-(区、县)" readonly=true v-model="recipientInfo.area" border="none" :customStyle="{padding: '6px 9px', width:'220px'}"/>
								</view>
							</view>
						</uni-data-picker>
						<view>
							<uni-icons type="location" size="20" @click="chooseMapLocation"></uni-icons>
						</view>
					</view>
				</u-form-item>
				<u-form-item required="true" :label-width="labelWidth" label="详细地址" prop="address">
					<u--textarea class="address" v-model="recipientInfo.address"  autoHeight=true border="none" maxlength="50"
						placeholder="街道、乡镇, 具体至门牌号"/></u--textarea>
				</u-form-item>
			</u--form>
			<view class="address-clipboard">
				<view v-show="pasteText">
					<u--textarea class="address"  v-model="pasteTextArea" height=120 count=true
						placeholder="粘贴收货人姓名、手机号、地址，可自动识别您的地址信息。如(张三18811112222江苏省南京市鼓楼区幸福花园街道幸福小区)" />
					<!-- <textarea placeholder-class="line" v-model="pasteTextarea" value=""
						placeholder="粘贴收货人姓名、手机号、地址,可自动识别您的收货信息">
					</textarea> -->
					<view class="clipboardbtn">
						<button class="btn" @click="clearPaste" style="color: #409eff;background: #ecf5ff; border-color: #b3d8ff; border-radius: 20px;">清空</button>
						<button class="btn" type="primary" @click="sumbitPaste" style="color: #67c23a; background: #f0f9eb; border-color:#c2e7b0; border-radius: 20px;">识别</button>
					</view>
				</view>
				<view class="clipboard" @click="showPasteText">
					显示地址粘贴板
					<u-icon :name="iconName" class="icon" :size="20"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="tag">
				<view class="left">标签</view>
				<view class="right">
					<template v-for="(tag,i) in tagList">
						<text :class="[tag.checked ? 'active': '','tags']" :key="i" 
						@click="tagSelect(tag.value,tag.checked,i)">{{tag.value}}</text>
					</template>
					<view class="tags plus" @click="addTag">
						<u-icon size="16" name="plus"></u-icon>
					</view>
				</view>
			</view>
			<view class="default">
				<view class="left">
					<view class="set">设为默认地址</view>
					<view class="tips">提醒：下单会优先使用该地址</view>
				</view>
				<view class="right">
					<u-switch v-model="recipientInfo.isDefault" size=22></u-switch>
				</view>
			</view>
			<view class="sumbitBtn">
				<button v-if="!isUpdate" class="btn" type="warning" size="medium" @click="resetInfo" style="color: #e6a23c;background: #fdf6ec; border-color: #f5dab1;">重置</button>
				<button v-if="isUpdate" class="btn" type="warn" size="medium" @click="deleteShow=true">删除</button>
				<button class="btn" type="primary" size="medium" color="#4a94de" @click="submitInfo">保存</button>
			</view>
		</view>
		<u-modal :show="addTagChecked" @confirm="confirmAddTag" @cancel="addTagChecked=false" @close="addTagChecked=false" 
		showCancelButton=true :closeOnClickOverlay="true" title="输入标签"  width="300px">
			<view class="slot-content">
				<u-input v-model="addTagValue" :maxlength="4" type="text" placeholder="标签最多4个字" />
			</view>
		</u-modal>
		<u-toast ref="uToast" />
		<u-modal :show="deleteShow" @confirm="deleteInfo" @cancel="deleteShow=false" @close="deleteShow=false" closeOnClickOverlay=true 
		showCancelButton=true confirmColor="red">
			<view class="slot-content">
				<rich-text :nodes="deleteContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	const cityRows = require('../../static/citydata.json')
	export default {
		data() {
			return {
				recipientInfo: {
					id: 0,
					name: '',
					phone: '',
					area: '',
					address: '',
					tag: '',
					isDefault: false,
				},
				isUpdate: false,
				localData: [],  // 省市区
				errorType: 'message',
				labelWidth: 70,
				pasteText: false,
				pasteTextArea: '',
				iconName: 'arrow-down',
				tagList: [
					{
						checked: false,
						value:'家'
					},
					{
						checked: false,
						value:'学校'
					},
					{
						checked: false,
						value:'公司'
					},
				],
				addTagChecked: false,
				addTagValue: '',
				deleteShow: false,
				deleteContent: '确定删除该条地址记录吗',
				formRules: {
					name: {
						type: 'string',
						required: true,
						max:8,
						message: '请输入长度不超过8个字符的姓名',
						trigger: ['blur', 'change']
					},
					phone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					area: {
						type: 'string',
						required: true,
						message: '请完善地区',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请填写具体地址,',
						trigger: ['blur']
					},
				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.addAddressForm.setRules(this.formRules)
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.updateAddress(option); //打印出上个页面传递的参数。
			this.localData = this.get_city_tree()  //省市区数据生成
		},
		methods: {
			...mapActions('m_user',{addAddress:'addAddress',deleteAddress:'deleteAddress'}),
			...mapMutations('m_user',['addToAddress','deleteToAddress']),
			clearAll(){
				this.recipientInfo = {
					name: '',
					phone: '',
					area: '',
					address: '',
					tag: '',
					isDefault: false,
				}
				this.isUpdate = false
				this.errorType = 'message'
				this.labelWidth = 80
				this.pasteText = false
				this.localData = [],  // 省市区
				this.pasteTextArea = ''
				this.iconName = 'arrow-down'
				this.tagList = [
					{
						checked: false,
						value:'家'
					},
					{
						checked: false,
						value:'学校'
					},
					{
						checked: false,
						value:'公司'
					},
				]
				this.addTagChecked = false
				this.addTagValue = ''
				this.deleteShow = false
			},
			clearPaste(){
				this.pasteTextArea = '';
			},
			//打开地址粘贴板
			showPasteText(){
				this.pasteText = !this.pasteText
				if(this.pasteText == false){
					this.iconName = 'arrow-down'
				}else{
					this.iconName = 'arrow-up'
				}
			},
			
			// 标签选择
			tagSelect(value, checked, index) {
				checked == false ? this.recipientInfo.tag = value : this.recipientInfo.tag = '';
				//只能选择一个标签
				this.tagList.forEach((tag, i) => {
					if (i == index) {
						this.tagList[i].checked = !this.tagList[i].checked
					} else {
						this.tagList[i].checked = false
					}
				})
			},
			// 打开添加标签
			addTag() {
				this.addTagChecked = true;
				this.addTagValue = ''
			},
			//确认添加标签
			confirmAddTag() {
				console.log(this.addTagValue);
				if (this.addTagValue != '') {
					this.tagList.forEach((tag, i) => {
						this.tagList[i].checked = false;
					})
					this.tagList.push({
						value: this.addTagValue,
						checked: true
					})
					this.recipientInfo.tag = this.addTagValue
					this.addTagChecked = false
				} else {
					this.$refs.uToast.show({
						message: '标签不能为空',
						position: 'top',
						type: 'error',
					})
					this.addTagChecked = true;
				}
			},
			//自动识别地址,样式：如：张三18811112222江苏省南京市鼓楼区幸福花园街道幸福小区
			//提交粘贴的收件人信息
			sumbitPaste() {
				var text = this.pasteTextArea;
				text = text.replace(/\s*/g, ""); //清空文本全部空格
				// text = text.replace(/(^\s*)|(\s*$)/g, "") //清除文本前后空格
				console.log(text);
				if (text == '') {
					this.recipientInfo = {
						name: '',
						phone: '',
						area: '',
						address: '',
						isDefault:false,
					}
					return;
				}
				//电话号码正则表达式
				var regx = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
				var phone_num = text.match(regx);
				console.log(phone_num);
				if (phone_num != null) {
					var phone = text.indexOf(phone_num[0]);
				}

				//姓名，电话，地址
				var name = text.indexOf("姓名:")
				var u_area = ''
				if (name >= 0) {
					var phone = text.indexOf("电话:"),
						address = text.indexOf("地址:"),
						cityOne = text.indexOf("省"),
						cityTwo = text.indexOf("市"),
						cityThree = text.indexOf('区') >= 0 ? text.indexOf('区') : text.indexOf("县");
					var u_name = text.substring(name + 3, phone),
						u_phone = text.substring(phone + 3, address),
						u_address = text.substring(address + 3, text.length);
					if (cityOne >= 0) {
						u_area = text.substring(address + 3, cityOne + 1)  +
							text.substring(cityOne + 1, cityTwo + 1)  +
							text.substring(cityTwo + 1, cityThree + 1)
					} else {
						u_area = text.substring(address + 3, cityTwo + 1)  +
							text.substring(cityTwo + 1, cityThree + 1)
					}
					this.recipientInfo = {
						name: u_name,
						phone: u_phone,
						area: u_area,
						address: u_address,
						tag: '',
						isDefault: false,
					}
					this.clearPaste()
				} else if (phone >= 0) {
					var cityOne = text.indexOf("省"),
						cityTwo = text.indexOf('市'),
						cityThree = text.indexOf('区') >= 0 ? text.indexOf('区') : text.indexOf("县");
					// cityThree2 = text.indexOf("县");
					var u_name = text.substring(0, phone),
						u_phone = text.substring(phone, phone + 11),
						u_address = text.substring(phone + 11, text.length);

					if (cityOne >= 0) {
						u_area = text.substring(phone + 11, cityOne + 1)  +
							text.substring(cityOne + 1, cityTwo + 1)  +
							text.substring(cityTwo + 1, cityThree + 1)
					} else {
						u_area = text.substring(phone + 11, cityTwo + 1)  +
							text.substring(cityTwo + 1, cityThree + 1)
					}

					this.recipientInfo = {
						name: u_name,
						phone: u_phone,
						area: u_area,
						address: u_address,
						tag: '',
						isDefault: false,
					}
					this.clearPaste()
				} else {
					this.recipientInfo = {
						name: '',
						phone: '',
						area: '',
						address: '',
						tag: '',
						isDefault: false,
					}
					return;
				}
			},
			
			//提交地址信息
			submitInfo(){
				this.$refs.addAddressForm.validate().then(res => {
						console.log("使用store的方法保存地址信息到缓存")
						this.addAddress(this.recipientInfo)
						uni.navigateBack()
					}).catch(errors => {
						uni.$u.toast('请按提示完善信息再提交')
				})

			},
			
			//重置地址信息
			resetInfo(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定重置所有输入吗',
					confirmColor: '#e6a23c',
					success: function (res) {
						if (res.confirm) {
							that.clearAll()
						} 
						// else if (res.cancel) {
						// 	console.log('用户点击取消');
						// }
					}
				});
			},
			//修改待更新地址信息
			//获取待更新数据
			updateAddress(info) {
				this.isUpdate = JSON.stringify(info) != "{}" ? true : false;
				let addressInfo = ''
				if (JSON.stringify(info) != "{}") {
					addressInfo = JSON.parse(info.addressInfo);
					console.log(addressInfo)
					this.recipientInfo = addressInfo;
				}

				//标签是否存在
				let isExist = this.tagList.find((n, i) => n.value == this.recipientInfo.tag)
				if(this.isUpdate && this.recipientInfo.tag!=''){
					if (isExist != undefined ) {
						this.tagList.forEach((tag, i) => {
							if (tag.value == this.recipientInfo.tag) {
								this.tagList[i].checked = true
							}
						})
					} else {
						this.tagList.push({
							value: this.recipientInfo.tag,
							checked: true
						})
					}
				}
			},
			deleteInfo(){
				console.log("使用store的方法将地址信息从缓存中删除")
				this.deleteShow = false
				this.deleteAddress(this.recipientInfo)
				uni.navigateBack()
			},
			
			
			//addresspicker地区选择
			// 节点变化后 （并非已经选择完毕）
			onnodeclick(node) {
				// console.log(JSON.stringify(node))
			},
			
			// 整体选择完成以后
			onchange(e) {
				console.log(JSON.stringify(e))
				const addressList = e.detail.value.map((item,index) => {
					return item.text
				})
				console.log(addressList)
				console.log(this.recipientInfo.area)
				this.recipientInfo.area=''
				addressList.forEach((item,index) =>{
					this.recipientInfo.area += item
				})
				console.log(this.recipientInfo.area)
			},
			
			// 省市区数据树生成
			get_city_tree () {
				let res = []
				if (cityRows.length) {
					// 递归生成
					res = this.handleTree(cityRows)
				}
				return res
			},
			
			/**
			 * 递归生成树结构数据 - 省市区
			 * 
			 * @param {Object} data
			 * @param {String} parent_code 上级ID | null代表需要顶部菜单
			 * @author Rudon  https://rudon.blog.csdn.net/
			 * 
			 * 源数据：
			 * {
			 * 	  "code": "110100", 
			 *    "name": "北京市",
			 *    "pinyin": "beijingshi",
			 *    "zip_code": "100000",
			 *    "parent_code": "110000",
			 *    "type": 1,
			 *    "first_letter": "B"
			 * }
			 * 
			 * 目标：
			 * {
			 *   text: "XX市",
			 *   value: "810000",
			 *   children: []
			 * }
			 * 
			 */
			handleTree (data, parent_code = null) {
				let res = []
				
				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',
					
					text: 'name',
					value: 'code'
				}
				
				let oneItemDEMO = {
					text: '',
					value: '',
					children: []
				}
				let oneItem = {}
				
				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty( keys.pid ) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code，或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]
							
							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)
							
						} else {
							// 匹配不到，跳过
						}
						
					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty( keys.pid ) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]
							
							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)
							
						} else {
							// 匹配不到，跳过
						}
						
					}
					
				}
				return res
			},
			//地图选择
			chooseMapLocation(){
				uni.chooseLocation({
					success:(res)=> {
						console.log("111"+JSON.stringify(res));
						this.recipientInfo.address = res.address + res.name
						// this.getRegionFn(res);
					},
					fail:()=>{
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if(!status['scope.userLocation']){
								// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title:"是否授权当前位置",
										content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success:(tip)=>{
											if(tip.confirm){
											// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success:(data)=>{
													// 如果用户授权了地理信息在，则提示授权成功
														if(data.authSetting['scope.userLocation']===true){
															uni.showToast({
																title:"授权成功",
																icon:"success",
																duration:1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (res) => {
																	console.log("详细地址",res);
																	// this.getRegionFn(res);
																}
															})
														}else{
															uni.showToast({
																title:"授权失败",
																icon:"none",
																duration:1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title:"调用授权窗口失败",
									icon:"none",
									duration:1000
								})
							}
						})
					}
				});
			},
			// 获取位置
			getLocation () {
			  let that = this
			  // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
			  uni.getSetting({
				success (res) {
				  console.log("222"+JSON.stringify(res))

				  // 如果没有授权
				  if (!res.authSetting['scope.userLocation']) {
					// 则拉起授权窗口
					uni.authorize({
					  scope: 'scope.userLocation',
					  success () {
						//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
						uni.getLocation({
						  type: 'wgs84',
						  success: function (res) {
							that.x = res.longitude
							that.y = res.latitude
							console.log(res)
							console.log('当前位置的经度：' + res.longitude)
							console.log('当前位置的纬度：' + res.latitude)
							uni.showToast({
							  title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
							  icon: 'success',
							  mask: true
							})
						  }, fail (error) {
							console.log('失败', error)
						  }
						})
					  },
					  fail (error) {
						//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
						console.log('拒绝授权', error)

						uni.showModal({
						  title: '提示',
						  content: '若点击不授权，将无法使用位置功能',
						  cancelText: '不授权',
						  cancelColor: '#999',
						  confirmText: '授权',
						  confirmColor: '#f94218',
						  success (res) {
							console.log(res)
							if (res.confirm) {
							  // 选择弹框内授权
							  uni.openSetting({
								success (res) {
								  console.log(res.authSetting)
								}
							  })
							} else if (res.cancel) {
							  // 选择弹框内 不授权
							  console.log('用户点击不授权')
							}
						  }
						})
					  }
					})
				  } else {
					// 有权限则直接获取
					uni.getLocation({
					  type: 'wgs84',
					  success: function (res) {
						that.x = res.longitude
						that.y = res.latitude
						console.log(res)
						console.log('当前位置的经度：' + res.longitude)
						console.log('当前位置的纬度：' + res.latitude)
						uni.showToast({
						  title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
						  icon: 'success',
						  mask: true
						})
					  }, fail (error) {
						uni.showToast({
						  title: '请勿频繁调用！',
						  icon: 'none',
						})
						console.log('失败', error)
					  }
					})
				  }
				}
			  })

			}
		},
	}
</script>

<style lang="scss" scoped>
.wrap {
	background-color: #f2f2f2;
	// .input-border {
	// 	border: 1px solid #b3e5fc;
	// 	border-width: 0.5px !important;
	// 	border-color: #dadbde !important;
	// 	border-style: solid;
	// 	border-radius: 4px;
	// 	padding-top: 6px;
	// 	padding-bottom: 6px;
	// 	padding-left: 9px;
	// 	padding-right: 9px;
	// }
	
	// .input-selected {
	// 	display: flex;
	// 	flex-direction: row;
	// 	line-height: 2;
	// 	align-items: center;
	// 	flex: 1;
	// }
	.chooseArea {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 10rpx 30rpx;

		.formClass {
			.u-form-item {
				font-size: 32rpx !important;
			}

		}

		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;

			.left {
				width: 180rpx;
			}

			input {
				text-align: left;
			}
		}

		.address {
			// width: 100%;
			height: 170rpx;
			line-height: 60rpx;
			margin: 10rpx auto;
			padding: 10rpx;
		}

		.address-clipboard {
			padding: 0 20rpx;
			margin-top: 10px;
		 
			.address {
				width: 100%;
				height: 200rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}

			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;

				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}

		}
	}

	.bottom {
		margin-top: 20rpx;
		padding: 22rpx;
		background-color: #ffffff;
		font-size: 28rpx;

		.tag {
			display: flex;

			.left {
				width: 160rpx;
				line-height: 160rpx;
				text-align: center;
			}

			.right {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.active {
					color: #2979FF !important;
					border: solid 2rpx #2979FF !important;
				}

				.tags {
					width: 140rpx;
					height: 20px;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}

				.plus {
					//padding: 10rpx 0;
				}
			}
		}

		.default {
			margin-top: 20rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 49rpx;

			.tips {
				font-size: 10px;
				margin-bottom: 5px;
			}

			.right {
				padding-right: 30rpx;
			}
		}
	}
	
	.clipboardbtn {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
	}

	.sumbitBtn {
		display: flex;
		flex-wrap: nowrap;
		margin: 40rpx 0rpx 20rpx 0rpx;
	}
	.btn {
		height: 40px;
		font-size: 14px;
		width:25%;
		text-align: center;
	}
	.btn:hover {
		opacity: 0.6
	}

}
</style>
